@extends('public.dashboard_base')
@section('title', '会员管理')
@section('content')
    <div class="control_panel_content">
        <div class="navBreadcrumb">
            <ul>
                <li>管理员菜单</li>
                <li><a href="/member/manager/user/blacklist">会员管理</a></li>
            </ul>
        </div>
        <div class="panel">
            <div class="sub_nav_container" style="margin-bottom: 10px">
                <ul class="clearfix">
                    <li><a href="/member/manager/user">会员列表</a></li>
                    <li class="active"><a href="/member/manager/user/blacklist">禁止列表</a></li>
                    {{--                    <li><a href="/funds/withdrawal">申请提现</a></li>--}}
                </ul>
            </div>

            <div class="demoTable" style="margin-left: 50px">
                邮箱搜索：
                <div class="layui-inline">
                    <input class="layui-input" id="search_value"  placeholder="ID--邮箱--QQ--微信" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="search">搜索</button>
            </div>


            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="multiAdd">批量添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="multiDelete">批量删除</button>
                </div>
            </script>
            <table id="table" lay-filter="table"></table>

            <script type="text/html" id="barDemo">
{{--                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="cash">充值</a>--}}
{{--                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--}}
                {{--                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--}}
                <input type="checkbox"  value="@{{d.id}}"  lay-skin="switch" lay-filter="switchStatus" lay-text="正常|禁止"
                       lay-event="status">
            </script>

        </div>

    </div>
@endsection
@section('script')
    <script type="text/javascript" src="/static/js/laydate.js"></script>
    <script>
        $(function () {
            var link = $("#manager_user");
            link.parent().parent().parent().addClass("active");
            link.parent().addClass("active");
        });

        //表格
        layui.table.render({
            elem: '#table'
            , id: 'id_table'
            //  , toolbar: '#toolbar'
            , url: '/member/manager/user/blacklist' //数据接口
            , method: 'POST'
            , headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , page: true //开启分页
            , limit: 10
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 70, sort: true, fixed: 'left'}
                , {field: 'email', title: '邮箱'}
                , {field: 'cash', title: '现金', width: 120}
                , {field: 'qq', title: 'QQ', width: 180}
                , {field: 'wechat', title: '微信', width: 180}
                , {field: 'last_login', title: '最后登录', width: 200, sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
            ]]
            , defaultToolbar: [] //'filter', 'exports', 'print'
        });

        //监听搜索按钮
        // var $ = layui.$, active = {
        var active = {
            search: function () {
                layui.table.reload('id_table', {
                    where: { //设定异步数据接口的额外参数，任意设
                        value: $('#search_value').val()
                        // key: {
                        //     email: $('#search_email').val()
                        // }
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            }
        };

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        layui.table.on('tool(table)', function (obj) {
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    $.ajax({
                        url: '/manager/news_del',
                        type: "post",
                        data: {'_token': '{{csrf_token()}}', 'id': obj.data.id},
                        success: function (data) {
                            if (data.msg === 'success') {
                                layer.msg('成功', {icon: 1, time: 500}, function () {
                                    layer.close(index);
                                })
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        error: function (xhr, Status, error) {
                            layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                window.location.href = '/manager/news_edit?id=' + obj.data.id;
            } else if (obj.event === 'cash') {
                //prompt层
                layer.prompt({title: '请输入充值金额 扣除输入负数'}, function (val, index) {
                    $.ajax({
                        url: '/member/manager/user/recharge',
                        type: "post",
                        data: {'_token': '{{csrf_token()}}', 'id': obj.data.id, 'cash': val},
                        success: function (data) {
                            if (data.msg === 'success') {
                                layer.msg('成功', {icon: 1, time: 500}, function () {
                                    layui.table.reload('id_table', {
                                        // page: {
                                        //     curr: 1 //重新从第 1 页开始
                                        // }
                                    });
                                })
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        error: function (xhr, Status, error) {
                            layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        //监听锁定操作 (switch)
        layui.form.on('switch(switchStatus)', function(obj){
           //console.log(obj.elem.checked);
            
            $.ajax({
                url: '/member/manager/user/status',
                type: "post",
                data: {'_token': '{{csrf_token()}}', 'id': obj.value, 'status': obj.elem.checked},
                success: function (data) {
                    if (data.msg === 'success') {
                        layer.msg('成功', {icon: 1, time: 500}, function () {
                            layui.table.reload('id_table', {
                            });
                        })
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (xhr, Status, error) {
                    layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                }
            });
          
        });
        //监听工具栏事件
        layui.table.on('toolbar(table)', function (obj) {
            // var checkStatus = layui.table.checkStatus(obj.config.id);
            // console.log(checkStatus);
            // console.log(obj);
            switch (obj.event) {
                case 'add':
                    window.location.href = '/manager/news_add';
                    break;
                case 'multiAdd':
                    window.location.href = '/manager/news_multi_upload';
                    break;
                case 'multiDelete':
                    var ids = getCheckStatusItem();
                    if (ids.length === 0) {
                        layer.msg('请选择 批量删除的ID');
                        return false;
                    }
                    layer.confirm('真的删除这些么', function (index) {
                        $.ajax({
                            url: '/manager/news_del',
                            type: "post",
                            data: {'_token': '{{csrf_token()}}', 'ids': ids},
                            success: function (data) {
                                if (data.msg === 'success') {
                                    layer.msg('成功', {icon: 1, time: 500}, function () {
                                        layer.close(index);
                                        window.location.reload();
                                    })
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            },
                            error: function (xhr, Status, error) {
                                layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                            }
                        });
                        layer.close(index);
                    });
                    break;
            }
        });


        //获取选中数据
        function getCheckStatusItem() {
            var checkStatus = layui.table.checkStatus('table');
            var data = checkStatus.data;  //获取选中行数据
            var ids = [];
            $.each(data, function ($key, $el) {
                ids.push($el.id);
            });
            return ids;
        }

    </script>
@endsection
